<template>
  <div class="safety">
    <div class="title">
      <h4>账户安全</h4>
    </div>
    <div class="content">
      <div class="phone">
        <span class="name">手 机：</span>
        <span class="nameT" v-text="userInfo.phone?userInfo.phone:'未绑定'"></span>
        <a href="" v-text="userInfo.phone?'去修改>':'前往绑定>'"></a>
      </div>
      <div class="qq">
        <span class="name">绑 定 Q Q：</span>
        <span class="nameT" v-text="userInfo.qq?userInfo.qq:'未绑定'"></span>
        <a href="" v-text="userInfo.qq?'去修改>':'前往绑定>'"></a>
      </div>
      <div class="weiChat">
        <span class="name">绑 定 微 信：</span>
        <span class="nameT" v-text="userInfo.weiChat?userInfo.weiChat:'未绑定'"></span>
        <a href="" v-text="userInfo.weiChat?'去修改>':'前往绑定>'"></a>
      </div>
      <div class="pwd">
        <span class="name">密 码：</span>
        <span class="nameT">{{userInfo.pwd}}</span>
        <a href="" v-text="userInfo.pwd?'修改密码>':'前往绑定>'"></a>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "safety",
        data() {
            return {
                userInfo: {
                    phone: '',
                    qq: '',
                    weiChat: '',
                    pwd: '********'
                },
            }
        }
    }
</script>

<style scoped lang="scss">
  @import '../../../styles/common.scss';
  .safety{
    .title{
      h4{
        font-size: 1.1rem;
        padding: 10px 20px;
      }
    }
    .content{
      .phone,.qq,.weiChat,.pwd{
        border-bottom: 1px dotted #f2f2f2;
        margin: 0 20px;
        span.name{
          padding: 14px 10px 14px 0;
          display: inline-block;
          min-width: 80px;
          text-align: right;
          font-size: 0.8rem;
        }
        span.nameT{
          min-width: 80px;
          padding: 0 10px;
        }
        a{
          color: #2e86ff;
          font-size: 0.7rem;
          margin: 0 6px;
        }
      }
    }
  }
</style>